<template>
    <div :id="id"></div>
</template>

<script>
import * as echarts from 'echarts';
import editChart from '@/js/element/chart.js';
import register from '@/js/main/register.js';
export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            myChart: null
        };
    },
    created() {
        editChart.init(this);
        register.addComponent(this);
    },
    mounted() {
        this.myChart = echarts.init(document.getElementById(this.id));
        this.myChart.setOption(this.element.attribute.chartOption.option);
    },
    destroyed() {
        editChart.remove(this);
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    display: none;
}
</style>